<!-- index-main -->
<template>
  <div class="index-main">
    <!-- 占位 -->
    <div class="line-box">
      <dv-decoration-4
        :dur="20"
        :reverse="true"
        style="width: 100%; height: 100%"
      />
    </div>
    <!-- 地图 -->
    <div class="map">
      <!-- <Map></Map> -->
      <!-- <dv-border-box-8> -->
      <FullMap></FullMap>
    </div>
    <!-- 检验检测等功能模块 -->
    <div class="title">
      <ul>
        <li>
          <div class="tool" @click="toListPage('postGetDeviceSList', '检验检测')">
            <span class="detect"></span>
            <span>检验检测</span>
          </div>
        </li>
        <li>
          <div class="tool" @click="toNotice">
            <el-badge :value="talkingNum" :max="99" :hidden="false" class="item msg">
              <i class="el-icon-message-solid"></i>
              <span>公告</span>
            </el-badge>
          </div>
        </li>
        <li>
          <div class="tool" @click="toKnowledge">
            <span class="kg"></span>
            <span>知识库</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <dv-decoration-1 style="width: 22%; height: 100%" class="dec1" />
      <dv-decoration-2 style="width: 75%; height: 20%" class="dec2" />
    </div>
  </div>
</template>

<script>
// import Emap from "../map/Emap";
// import Map from "../map/Map"
import FullMap from "../container/FullMap";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { FullMap },
  data() {
    //这里存放数据
    return {
      mapStr: "连云港市1",
      simpleMap: true,
    };
  },
  props:['talkingNum'],
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toListPage(dataType, title, routePath) {
      this.$store.commit("setListTitle", title);
      // console.log(e.dataIndex)
      // console.log(getUnitData())
      this.$store.commit('clearIndex')
      this.$store.commit('setListCategory', dataType)
      this.$router.push({
        name: "list-page",
      });
    },
    changeMap() {
      this.simpleMap ? (this.simpleMap = false) : (this.simpleMap = true);
      console.log(this.simpleMap);
    },
    toKnowledge () {
      this.$router.push('/knowledge')
    },
    toNotice () {
      this.$router.push('/notice-list')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log('收到公告数');
    // console.log(this.talkingNum);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.index-main {
  height: 100%;
  width: 100%;
  // padding: 0 0.5%;
  // padding-top: 4%;
  .line-box {
    width: 100%;
    height: 4%;
  }
  .title {
    width: 100%;
    height: 20%;
    position: relative;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      li {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s;
        .tool {
          width: 80%;
          height: 50%;
          // border: 1px solid #aefdca;
          border-radius: 0.1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: @Blue;
          i {
            font-size: 0.4rem;
            color: @FontColor;
          }
          span {
            color: @FontColor;
            font-size: 0.22rem;
          }
          .detect,
          .kg {
            width: 0.41rem;
            height: 0.4rem;
            background-image: url("../../assets/icon/检验检测.png");
            background-size: cover;
            margin-right: 0.1rem;
          }
          .kg {
            background-image: url("../../assets/icon/知识库.png");
          }
          .item.msg {
            width: 70%;
            height: 65%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      li:nth-child(2) .tool {
        background-color: @FontBlue;
      }
      li:last-child .tool {
        background-color: @Green;
      }
      li:hover {
        transform: translateY(-0.06rem);
      }
    }
  }
  .map {
    width: 96%;
    height: 70%;
    border-radius: 1%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .foot {
    width: 100%;
    height: 4%;
    position: relative;
    .dec1 {
      position: absolute;
      // top: 25%;
    }
    .dec2 {
      position: absolute;
      top: 40%;
      left: 25%;
    }
  }
}
</style>